<!--suppress ALL -->
<template>
  <div class="page" data-page="comvdList" style="z-index: 2;">
      <div class="link-page-nav">
        <a href="#" class="link" @click="$root.backToTab()">
          <i class="iconfont icon-zuo"></i>
        </a>
      </div>
      <div class="link-page-top" style="padding-bottom: 17px;">
        <div class="link-page-list-title">视频列表</div>
      </div>
      <div class="page-content">
            <div class="list search-list media-list searchbar-found video-list no-hairlines" style="margin: 12px 0;">
                <ul id="vedio_list"></ul>
            </div>
      </div>
  </div>
</template>

<style scoped>
  .video-list{
    margin: 0px;
  }

  .videoli{
    width: 100%;
    height: 240px;
  }
  .div_img{
    position: absolute;z-index: 1;height: 186px;;
  }
  .vedioImg{
    width: 92%;
    margin-left: 4%;
    height: 186px;
    margin-top: 12px;
  }
  .div_name{
    padding-left: 25px;
    width: 75%;
    float: left;
  }

  .status_div{
    position: absolute;
    top: 0;
    z-index: 3;
    width: 92%;
    margin-left: 4%;
    height: 186px;
    margin-top: 12px;
  }
  .div_status{
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .img_status{
    padding-top: 68px;
  }
  .my_div{
    width: 100%;
    height: 186px;
    padding-top: 12px;
  }
  .img_opacity{
    opacity:0.6;
  }
</style>
<script>
  return {
    mounted() {
      var self = this;
    },
    data: function () {
      return {

      }
    },
    methods: {
      getMoreData:function(){
        var self = this;
        var $ = self.$$;
        var relateObjId = self.$route.params.relateObjId;
        common.loading(1);
        Dao.getFcfRelateVideos({
            userName:userInfor.accountName,
            deviceId:appKeyObj.deviceId,
            relateObjType:1,
            relateObjId:relateObjId,//探测器id
            account:userInfor.accountName
        },function(data){
              common.loading(0);
              if (data&&data.length > 0) {
                    //self.showUnitList(data);
                    $("#vedio_list").append(`<div class="no-data-img">暂不支持</div>
                                           `);
                    
              } else {
                    //暂无数据
                    $("#vedio_list").append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>
                                           `);
              }
        });
      },
      //显示视频列表
      showUnitList:function(data){
        var self = this;
        $("#vedio_list").empty();
          for(var i = 0; i < data.length; i++){
              var status = "";
              if (data[i].isOnline == 1) {
                  status = staticPath + "img/vedio/play.png"
              }
              if (data[i].isOnline == 0) {
                  status = staticPath + "img/vedio/offline.png"
              }
              $("#vedio_list").append(`<li class="videoli" id=videoli`+ common.transNullundefined(data[i].id) +`>
                  <img class="vedioImg" id=img_`+common.transNullundefined(data[i].id)+` src=`+data[i].picUrl+`>
                  <div class="status_div">
                      <img class="div_status" src=`+ status +`>
                  </div>
                  <div class="div_name">`+common.transNullundefined(data[i].name)+`</div>
              </li>`);
              if (data[i].isOnline == 0){
                  $('#img_'+data[i].id).addClass("img_opacity");
              }
               //视频播放
              jQuery('#videoli'+common.transNullundefined(data[i].id)).off("click").on("click",{'data':data[i]},function(e) {
                    var bean = e.data.data;
                    var videoBean  = {};
                    videoBean.id = bean.id;
                    videoBean.deviceId = bean.deviceId;
                    videoBean.type = bean.type;
                    videoBean.name = bean.name;
                    videoBean.channel = bean.channel;
                    videoBean.status = bean.status;
                    videoBean.picUrl = bean.picUrl;
                    videoBean.isOnline = bean.isOnline;
                    Dao.getAuthList({
                         userName:userInfor.accountName,
                         deviceId:appKeyObj.deviceId,
                         organizationId:bean.organizationId,
                         equiptType:bean.type,
                         orgCode:userInfor.org.orgCode,
                         authId: bean.authId
                    },function(data) {
                          var videoKeyBean = data[0];
                          native.openVideo(JSON.stringify(videoKeyBean),JSON.stringify(videoBean));
                    },function(e) {

                    },true);
              });
          }
      }
    },
    on: {
      pageInit: function(e, page) {
          var self = this;
          self.pageIndex = 0;
          self.getMoreData();
      },
    }
  }

</script>
